<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>

</head>

<body>
    <div id="root">
        <h2>人员列表</h2>
        <button @click.once="add">添加一个老刘</button>
        <ul>
            <li v-for="(p,index) in persons" :key="index">
                {{p.name}} - {{p.age}}
                <input type="text">
            </li>
        </ul>
    </div>

</body>

</html>
<script>
    new Vue({
        el: '#root',
        data: {
            persons: [
                { id: '001', name: '张三', age: 18 },
                { id: '002', name: '李四', age: 19 },
                { id: '003', name: '王五', age: 20 },
            ]
        },
        methods: {
            add() {
                const p = { id: '0004', name: '老刘', age: 40 }
                this.persons.unshift(p)
            }
        },
    })
</script>

<!-- 

    面试题: react, vue中的key有什么作用?(key的内部原理)
        1. 虚拟DOM中key的作用
            key是虚拟DOM对象的标识, 当数据发生变化时, Vue会根据[新数据]生成[新的虚拟DOM],
            随后Vue进行[新虚拟DOM]与[旧虚拟DOM]的差异比较, 比较规则如下:
        2. 对比规则:
            (1). 旧虚拟DOm中找到与新虚拟DOM相同的key:
                a. 若虚拟DOM中内部没变, 直接使用之前的真实DOM!
                b. 若虚拟DOM中内容变了, 则生成新的真实DOM, 随后替换页面中之前的真实DOM
            (2). 旧虚拟DOM中未找到与新虚拟DOM相的key
                创建新的真实DOM, 随后渲染到页面
        3. 用index作为key可能会引发的问题
            1. 若对数据进行: 逆序添加, 逆序删除等破坏顺序操作:
                会产生没有必要的真实DOM更新==>界面效果没问题, 但效率低
            2. 如果结构中还包含输入类的DOM:
                会产生错误DOM更新==>界面有问题
        4. 开发中如果选择key?
            1. 最好使用每条数据的唯一标识作为key, 比如id,手机号, 身份证号等
            2. 如果不顾虑在数据的逆序添加, 逆序删除等破坏顺序的操作, 仅用于渲染列表
            用于展示, 使用index作为key是没有问题的


 -->